<template>
    <div class="sideBar">
        <div 
            v-for="(item, index) in routers"
            :key="index"
            class="sideBarItem"
            @click="routeTo(item.path)"
            :class="currentPath === item.path ? 'selectedBar' : ''">
            {{item.name}}
        </div>
    </div>
</template>

<script>
import {routes} from '@/router';
export default {
    name: "SideBar",
    data() {
        return {
            routers: [],
            currentPath: '',
        }
    },
    created(){
        this.init();
    },
    methods: {
        init(){
            this.routers = routes.filter(t => t.path === '/')[0].children;
            console.log('sideBar routers', this.routers);
            this.currentPath = this.$router.history.current.path;
        },
        routeTo(path){
            if(!this.$store.getters.token){
                this.$router.push('/login');
                return;
            }
            if(path === '/toLogin' && this.$store.getters.token){
                return;
            }
            if(path=== this.$router.history.current.path){
                return;
            }
            this.$router.push(path);
            this.currentPath = this.$router.history.current.path;
            this.$emit('currentPathEmit', this.currentPath);
        }
    }
}
</script>

<style scoped>
.sideBar{
    height: 100%;
    background: var(--sideBarBackground);
    overflow-y: auto;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 50px;
}
.sideBarItem{
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: var(--sideBarItemBackground);
    text-align: center;
    margin-bottom: 5px;
    border-radius: 10px;
}
.sideBarItem:nth-child(1){
    margin-top: 5px;
}
.sideBarItem:hover {
    background: var(--sideBarItemHoverBackground);
    cursor: pointer;
}
.sideBarItem:active {
    background: var(--sideBarItemActiveBackground);
}
.selectedBar {
    background: var(--selectedBarBackground);
}
</style>